<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>VIP</title>
    <link rel="shortcut icon"  th:href="@{/static/L-img/L-image/L-logo.png}">
    <link th:href="@{/static/L-img/font_2550907_osj83i90mhl/iconfont.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/static/L-css/L-vip.css}" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="wrap">
<!--头部-->
        <div class="head">
<!--会员中心-->
            <div class="vipCenter">
                <h1>
                    会员中心
                </h1>
<!--右边登录-->
                <div class="info">
                    <p class="remind">
                       返回
                        <strong>
                            <a th:href="@{/}">首页</a>
                        </strong>
                    </p>
                </div>
            </div>
            <div class="recharge">
                <div class="slogan">听未来歌曲不再受阻</div>
            </div>
        </div>
<!--        充值的主要部分-->
        <div class="vipBody">
            <div class="wing-area">
                <div class="wing-main">
<!-- 左边                   -->
                    <div class="wing-leftSide">
                        <div class="wing-left">
<!--                            上边图标-->
                            <div class="logo-vip">
                                <p class="bigzuan">
                                    <i class="iconfont icon-liebiaoye-VIPjiaobiao">
                                    </i>
                                    <em>15元/月</em>
                                </p>
                            </div>
<!--                            音质效果-->
                            <div class="tone">
                                <p>
                                    <i class="iconfont icon-yinle-01">
                                    </i>
                                    千万曲库
                                </p>
                                <p>
                                    <i class="iconfont icon-yinzhi">

                                    </i>
                                    无损音质
                                </p>
                                <p>
                                    <i class="iconfont icon-tubiaozhizuomoban">

                                    </i>
                                   付费歌曲下载
                                </p>
                                <p>
                                    <i class="iconfont icon-VIP">
                                    </i>
                                    尊享身份标识
                                </p>
                                <p>
                                    <i class="iconfont icon-shenglvehao">
                                    </i>
                                    等多项特权
                                </p>
                            </div>
                        </div>
                    </div>

<!--                右边的充值中心-->
                    <div class="wing-rightSide">
                        <div class="wing-right">
<!--                            开通的账号-->
                            <div class="dredge">
                                <p class="user-title">
                                    <span class="font-bold">
                                        开通账号
                                    </span>
                                    <span class="loginname">
                                        <span>欢迎</span>
<!--                                        <span class="userName" th:text="${session.User.userName}">用户名</span>-->
                                        <span class="userName">校招</span>
                                    </span>
                                </p>
                            </div>
<!--                            产品的类型-->
                            <div class="type">
                                <p class="product-type">产品类型</p>
                                <div class="open-time">
                                    <span class="senior">
                                        豪华VIP(尊享vip特权，开通即送音乐包)
                                    </span>
                                    <span class="month">15/月</span>
                                </div>

                            </div>
<!--                            开通的时长-->
                            <div class="time-type">
                                <p class="product-time">开通时长</p>
                                <div class="choose-type">
                                    <div class="one-year vipTime" name="12">
                                      <p >12个月<span class="price" >150元</span></p>
                                    </div>
                                    <div class="six-month vipTime" name="6">
                                        <p>6个月<span class="price" >90元</span></p>
                                    </div>
                                    <div class="three-month vipTime" name="3">
                                        <p>3个月<span class="price" >45元</span></p>
                                    </div>
                                    <div class="each-month vipTime">
                                        <p class="monthly" >按月:<input class="much" type="text" value="1" maxlength="4" autocomplete="off">个月</p>
                                    </div>

                                </div>
                            </div>
<!--                            应付金额-->
                            <div class="pay">
                                <p class="product-pay">应付金额:</p>
                                <div class="finally-money"></div>
                            </div>
<!--                            vip有效日期-->
                            <div class="date">
                                <p class="product-date">VIP有效日期:</p>
                                <div class="finally-date"></div>
                            </div>

                            <!--支付平台-->
                            <div class="payment">
                                <p class="pay-way">支付方式</p>
                                <div class="pay-math">
                                    <div class="zhi-pay">
                                        <a href="javascript:;">
                                            <i class="iconfont icon-zhifubao">
                                            </i>
                                        </a>
                                    </div>
                                </div>

                            </div>
                            <div class="explain">
                                <p>仅提供支付宝支付，带来不便望理解，但值得你的付出，相信我们</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
        <!-- 下边的小黑窗 -->
        <div class="black">
            <ul class="logo">
                <li><a href="javascript:;">用户服务协议</a></li>
                <li>隐私政策</li>
                <li>权利声明</li>
                <li>联系我们</li>
                <li>广告服务</li>
            </ul>
        </div>
        <div class="foot">
            <p>抛开忙碌，远离喧嚣，进入这里，你会发现生活是多么的缤纷多彩 欢迎加入我们</p>
            <p>Copyright © 2001 - 2021 Tencent. All Rights Reserved.</p>
            <p>未来公司 版权所有 QQ:911662779</p>
        </div>

    </div>

</body>
<!--<script src="../../L-js/L-vip.js" ></script>-->
<script th:src="@{/static/L-js/L-vip.js}" rel="script" type="text/javascript"></script>
</html>